@(resourceForm: Form[Resource])
@import play.i18n._

@css = {
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/resources/add.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/codemirror/codemirror.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/codemirror/theme/eclipse.css")" />
}

@scripts = {
	<script src="@routes.Assets.at("js/codemirror/codemirror.js")"></script>
	<script src="@routes.Assets.at("js/codemirror/mode/properties/properties.js")"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#name').keyup(function() {
				var resourceFileName = $('#resource-file-name');
				if(resourceFileName.prop('readonly')) {
					var value = $(this).val();
					var fileName = value.replace(/[^A-Za-z0-9\\-_ ]+/, '_');
					$('#resource-file-name').val(fileName);
				}
			});
			
			$('#define-resource-file-name').change(function() {
				var checked = $(this).is(':checked');
				$('#resource-file-name').prop('readonly', !checked);
				$('#name').keyup();
			});
			
			var textarea = document.getElementById('resource-content');
			var propertiesEditor = CodeMirror.fromTextArea(textarea, {
				lineNumbers: true,
				mode: 'properties',
				theme: 'eclipse'
			});
		});
	</script>
}

@main(Messages.get("view.resource.page.add.title"), css, scripts) {
	
	<div class="resource-form resource-form-2-column">
		@helper.form(action = routes.TestResources.createResource()) { 
			
			<div class="column">
				@helper.inputText(resourceForm("name"), '_label -> Messages.get("view.resource.form.name.label"), '_help -> Messages.get("view.resource.form.name.help"))
				
				<dl id="resource-file-name_field">
				    <dt>
				    	<label for="resource-file-name">@Messages.get("view.resource.form.file.name.label") <input type="checkbox" id="define-resource-file-name" name="define-resource-file-name" @if(resourceForm("define-resource-file-name").value() != "") { checked="checked" } title="@Messages.get("view.resource.form.file.name.define.label")" /></label>
				    </dt>
				    <dd>
					    <input type="text" id="resource-file-name" name="resource-file-name" class="input-file-name" @if(resourceForm("define-resource-file-name").value() == "") { readonly="readonly" } value="@resourceForm("resource-file-name").value()" />
					</dd>
			        <dd class="info">
			        	@Messages.get("view.resource.form.file.name.help")
			        </dd>
				</dl>
				
				@helper.textarea(resourceForm("description"), '_label -> Messages.get("view.resource.form.desc.label"), '_help ->  Messages.get("view.resource.form.desc.help"), 'class -> "input-description")
			</div>
			
			<div class="column">
				@helper.textarea(resourceForm("resource-content"), '_label -> Messages.get("view.resource.form.content.label"), 'cols -> 50, 'rows -> 10)
			</div>
			
			<div class="column-wide">
				<input type="submit" value="@Messages.get("view.resource.form.add.label")" />
				<a href="@routes.TestResources.listResources()" title="@Messages.get("view.common.cancel.label")"><button type="button">@Messages.get("view.common.cancel.label")</button></a>
			</div>
			
		}
		
		<div class="clear-right"></div>
	</div>
	
}
